<template>
<div>
  <h1>订单明细</h1>
  <el-row>
  <el-button type="success" @click="fanhui()">返回订单列表</el-button>
  </el-row>
  <span class="dingdanwancheng">{{form.orderTypes==1?"实时叫车":"预约叫车"}}:({{form.orderStatus==1?"已完成":form.orderStatus==2?"待接单":form.orderStatus==3?"司机已接单":"取消订单"}})</span>
  <div class="parent">
  <div class="child">
    <div class="ditu">
      <div id="map-container" style="width: 100%; height: 650px;"> </div>
        <!-- 用于展示路线规划结果的面板 -->
        <div id="panel"></div>
    </div>
    <div class="xinxi">
      <span class="fachu"><span class="white-ball"></span>订单发出&nbsp;{{form.startingDate}}</span>
      <span class="bianhao">
        订单编号：{{form.orderNumber}}<br>
        用户： {{form.userName}} {{form.passengerPhone}}<br>
        乘客： {{form.userName}} {{form.passengerPhone}}<br>
      </span>
      <span class="fachu">
        <span class="white-ball">
        </span>司机接单&nbsp;{{form.receivingTime}}
      </span>
      <span class="bianhao">
<!--        用户： {{form.userName}}<br>-->
        用户手机号： {{form.passengerPhone}}<br>
      </span>
      <span class="fachu">
        <span class="white-ball">
        </span>司机到达&nbsp;{{form.driverArrive}}
      </span>
      <span class="bianhao">
        出发等待时间：{{form.latencyTime}}<br>
      </span>
      <span class="fachu">
        <span class="white-ball">
        </span>接到乘客&nbsp;{{form.driverArrive}}
      </span>
      <span class="fachu">
        <span class="white-ball">
        </span>到达目的地&nbsp;{{form.arrivalTime}}
      </span>
      <span class="bianhao">
        订单里程：{{form.mileage}}<br>
        订单耗时：{{form.timeConsuming}}<br>
        订单费用：{{form.totalAmount}}<br>
<!--        优惠金额：<br>-->
      </span>
      <span class="fachu">
        <span class="white-ball">
        </span>订单支付&nbsp;{{form.arrivalTime}}
      </span>
      <span class="bianhao">
        支付方式：{{form.paymentMethod}}<br>
      </span>
      <span class="fachu">
        <span class="white-ball">
        </span>评价司机&nbsp;{{form.arrivalTime}}
      </span>
      <span class="bianhao">
        <a href="#">查看</a>：<br>
      </span>
      <span class="fachu">
        <span class="white-ball">
        </span>评价乘客&nbsp;{{form.arrivalTime}}
      </span>
      <span class="bianhao">
        <a href="#">查看</a>：<br>
      </span>
    </div>
    <div class="dingdan">
      <h4 class="dd">订单信息</h4><br>
      <span class="juli1">订单编号：<span class="kuang"> <span class="neirong">{{form.orderNumber}}</span></span></span>
      <span class="juli">订单类型：<span class="kuang"> <span class="neirong">{{form.orderTypes==1?"实时叫车":"预约叫车"}}</span></span></span>
      <span class="juli">订单状态：<span class="kuang"> <span class="neirong">{{form.orderStatus==1?"已完成":form.orderStatus==2?"待接单":form.orderStatus==3?"司机已接单":"取消订单"}}</span></span></span><br><br>
      <span class="geshi2">订单发出点：<span class="kuang"> <span class="neirong">{{form.pickupLocation}}</span></span></span>
      <span class="geshi1">出发点城市：<span class="kuang"> <span class="neirong">{{form.pickupLocation}}</span></span></span>
      <span class="geshi3">出发点行政区：<span class="kuang"> <span class="neirong">{{form.pickupLocation}}</span></span></span><br><br>
<!--      <span class="juli1">途径点1：<span class="kuang"> <span class="neirong">{{form.pathwayOne}}</span></span></span>-->
<!--      <span class="geshi4">途径点1城市：<span class="kuang"> <span class="neirong">{{form.pathwayoneCity}}</span></span></span>-->
<!--      <span class="geshi7">途径点2：<span class="kuang"> <span class="neirong">{{form.pathwayTwo}}</span></span></span><br><br>-->
      <span class="geshi5">目的地行政区：<span class="kuang"> <span class="neirong">{{form.dropoffLocation}}</span></span></span>      <span class="geshi6">订单目的地：<span class="kuang"> <span class="neirong">{{form.dropoffLocation}}</span></span></span>
      <span class="geshi6">目的地城市：<span class="kuang"> <span class="neirong">{{form.dropoffLocation}}</span></span></span><br><br>
      <span class="geshi8">订单发出时间：<span class="kuang"> <span class="neirong">{{form.startingDate}}</span></span></span>

      <span class="geshi9">实际下车点：<span class="kuang"> <span class="neirong">{{form.dropoffLocation}}</span></span></span>
      <span class="geshi11">实际下车城市：<span class="kuang"> <span class="neirong">{{form.dropoffLocation}}</span></span></span><br><br>
      <span class="geshi5">订单接单时间：<span class="kuang"> <span class="neirong">{{form.receivingTime}}</span></span></span>
<!--      <span class="geshi11">订单等待时间：<span class="kuang"> <span class="neirong">{{form.latencyTime}}</span></span></span><br><br>-->
<!--      <span class="geshi8">订单预约时间：<span class="kuang"> <span class="neirong">{{form.appointmentTime}}</span></span></span>-->
<!--      <span class="geshi11">订单到达时间：<span class="kuang"> <span class="neirong">{{form.arrivalTime}}</span></span></span>-->
     <span class="geshi7">订单里程：<span class="kuang"> <span class="neirong">{{form.mileage}}</span></span></span>
<!--      <span class="geshi12">订单耗时：<span class="kuang"> <span class="neirong">{{form.timeConsuming}}</span></span></span>-->
<!--      <span class="geshi11">是否提前下车：<span class="kuang"> <span class="neirong">{{form.ifDebarkation}}</span></span></span>-->
<!--      <span class="geshi6">乘客总费用：<span class="kuang"> <span class="neirong">{{form.paymentAmount}}</span></span></span><br><br>-->
<!--      <span class="geshi12">行车费用：<span class="kuang"> <span class="neirong">{{form.vehicleCost}}</span></span></span>-->
<!--      <span class="geshi10">附加费：<span class="kuang"> <span class="neirong">{{form.additionalCharge}}</span></span></span>-->
<!--&lt;!&ndash;      <span class="juli">优惠金额：<span class="kuang">{{form.orderNumber}}</span></span><br>&ndash;&gt;-->
<!--      <span class="juli">司机收益：<span class="kuang"> <span class="neirong">{{form.driverEarnings}}</span></span></span><br><br>-->
      <span class="geshi12">支付状态：<span class="kuang"> <span class="neirong">{{form.paymentStatus==1?'未支付':'已支付'}}</span></span></span><br><br>
<!--      <span class="juli">支付时间：<span class="kuang"> <span class="neirong">{{form.paymentTime}}</span></span></span>-->
<!--      <span class="juli">支付方式：<span class="kuang"> <span class="neirong">{{form.paymentMethod}}</span></span></span><br><br>-->
      <span class="xx">乘客投诉司机：<a href="#">查看</a></span>
      <span class="xx">司机投诉乘客：<a href="#">查看</a></span>
      <span class="xx">即时聊天：<a href="#">查看</a></span>
<!--      <span class="juli">电话通讯：<span class="kuang">{{form.frequency}}</span></span><br>-->
    </div>
  </div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: "9e336152b304845112d85b48a5e21c24",
}
export default {
  name: "Details",
  data(){
    return {
      form: {
        pickupLatitude: null,
        pickupLongitude: null,
        dropoffLatitude: null,
        dropoffLongitude: null
      },
    }
  },
  methods: {
    fanhui() {
      this.$router.push({path: '/dingdan'})
    },
    findxq() {
      var id = this.$route.query.id
      axios.post(`http://localhost:9999/api-function/orders/findxq?id=${id}`).then(res => {
        this.form = res.data.data
        this.pickupLatitude=this.form.pickupLatitude
        this.pickupLongitude=this.form.pickupLongitude
        this.dropoffLatitude=this.form.dropoffLatitude
        this.dropoffLongitude=this.form.dropoffLongitude
        console.log(this.form.pickupLatitude)
        console.log(this.pickupLongitude)
        console.log(this.form.dropoffLatitude)
        console.log(this.dropoffLongitude)
        // console.log(this.form)
      })
    },
    },
    created() {
      this.findxq()
    },
  mounted() {
    const delayTime = 1000; // 延迟1秒，可根据实际需求调整
    setTimeout(() => {
    // 写死的起点经纬度（你可按需替换真实值）
    const startLatitude = this.pickupLatitude
    const startLongitude = this.pickupLongitude
    console.log(this.form.pickupLatitude)
    console.log(this.pickupLongitude)
    // 写死的终点经纬度（你可按需替换真实值）
    const endLatitude = this.dropoffLatitude
    const endLongitude = this.dropoffLongitude;
    console.log(this.form.dropoffLatitude)
    console.log(this.dropoffLongitude)
    // 配置高德地图加载参数，替换成你自己申请的key
    AMapLoader.load({
      key: 'b9ebf1495abfabb76269509a1b81833a',
      version: '2.0',
      plugins: ['AMap.Geolocation', 'AMap.Geocoder', 'AMap.PlaceSearch',
        'AMap.AutoComplete', 'AMap.Driving', 'AMap.InfoWindow'
      ] // 加载定位插件 // 新增加载地理编码插件
    })
        .then((AMap) => {
          const map = new AMap.Map('map-container', {
            zoom: 10, // 设置地图缩放级别
            center: [116.223289, 40.219397] // 初始地图中心点坐标，可根据实际调整
          });
          // 创建路线规划实例
          const driving = new AMap.Driving({
            map: map,
            panel: "panel"
          });
          // 根据写死的起终点经纬度规划驾车导航路线
          driving.search(
              new AMap.LngLat(startLongitude, startLatitude),
              new AMap.LngLat(endLongitude, endLatitude),
              function(status, result) {
                if (status === 'complete') {
                  console.log('绘制驾车路线完成');
                  // 获取路线距离信息
                  const distance = result.routes[0].distance;
                  console.log('路线距离：', distance, '米');
                  // 根据时速计算行驶时间（单位：分钟）
                  const minSpeed = 40 * 1000; // 40千米/小时转换为米/小时
                  const maxSpeed = 50 * 1000; // 50千米/小时转换为米/小时
                  const minTime = Math.ceil(distance / maxSpeed * 60);
                  const maxTime = Math.ceil(distance / minSpeed * 60);
                  // 创建信息窗口
                  const infoWindow = new AMap.InfoWindow({
                    content: '全程 ' + (distance / 1000).toFixed(2) + ' 公里 ' ,
                    offset: new AMap.Pixel(0, -30)
                  });
                  // 在起点位置打开信息窗口
                  infoWindow.open(map, new AMap.LngLat(startLongitude,startLatitude));

                  // 显示路线
                  const route = result.routes[0];
                  const path = route.path;
                  const polyline = new AMap.Polyline({
                    path: path,
                    strokeColor: 'blue',
                    strokeWeight: 3,
                    strokeOpacity: 1
                  });
                  polyline.setMap(map);
                } else {
                  console.log('获取驾车数据失败：', result);
                }
              }
          );
        })
        .catch((e) => {
          console.log(e);
        });
  }, delayTime);
  }}
</script>
<style scoped>
.dingdanwancheng{
  display: inline-block;
  margin-left: 22%;
  padding-bottom: 10px;
  float: left; /* 左浮动 */
  font-size: 20px;
}
.neirong{
  display: inline-block;
  margin-top: -10px;
}
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 0px;
  z-index: 1000;
}
.bianhao{
  display: inline-block;
  border-left: 3px solid #4EA9CB;
  margin-left: 28px;
  width: 530px;
  margin-top: 5px;
}
.xx{
  display: inline-block;
  margin-left: 10.5%;
}
.parent {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;

}
.child {
  background-color: #EFEFEF;
  width: 1400px;
  //height: 1000px;
  border: 1px solid #171616;
}
.ditu{
  width: 800px;
  height: 700px;
  //border: 1px solid #171616;
  float: left; /* 左浮动 */
}
.xinxi{
  width: 555px;
  height: 700px;
  float: right; /* 右浮动 */
  //border: 1px solid #171616;
}
.dingdan{
  width: 1400px;
  margin-top: 10px;
  float: right; /* 左浮动 */
  border-top: 8px solid rgba(255, 255, 255, 0.93);
}
.kuang{
  border: 1px solid #CECECE;
  display: inline-block;
  background-color: #FFFFFF;
  width: 250px;
  height: 35px;
  padding-top: 13px;
  padding-left: 10px;
  margin-top: 20px;
}
span{
}
.juli1{
  margin-left: 80px;
  display: inline-block;
}
.juli{
  line-height: 20px;
  margin-left: 10%;
}
.dd{
  padding-left: 40px;
}
.geshi1{
  margin-left: 8%;
}
.geshi2{
  margin-left: 60px;
}
.geshi3{
  margin-left: 115px;
}
.geshi5{
  margin-left: 45px;
}
.geshi6{
  margin-left: 125px;
}
.geshi7{
  margin-left: 130px;
}
.geshi8{
  margin-left: 40px;
}
.geshi9{
  margin-left: 120px;
}
.geshi10{
  margin-left: 140px;
}
.geshi11{
  margin-left: 113px;
}
.geshi12{
  margin-left: 145px;
}
.fachu{
  display: inline-block;
  margin-top: 5px;
  font-size: 20px;
  width: 555px;
  background-color: #4EA9CB;
}
.white-ball {
  display: inline-block;
  width: 20px;
  margin-right: 10px;
  height: 20px;
  border-radius: 50%;
  margin-top: 10px;
  margin-left: 20px;
  background-color: white;
}
</style>
